<!-- 透明 -->
<template>
    <layout-pane label="透明">
        <div class="si-opacity-content">
            <el-slider
                v-model="currentOpacity"
                :step="0.01"
                :min="0"
                :max="1"
                :show-input="false"
                :show-input-controls="false"
                class="slider-wrap"
            />
            <si-input-number
                v-model="currentOpacity"
                :min="0"
                :max="1"
                :step="0.01"
            />
        </div>
    </layout-pane>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '../../layout-pane'
import SiInputNumber from '../si-input-number'
export default defineComponent({
    name: 'SiOpacity',
    components: {
        LayoutPane,
        SiInputNumber
    },
    props: {
        modelValue: {
            type: Number
        }
    },
    emits: [
        'update:modelValue'
    ],
    setup(props, { emit }) {
        const { modelValue } = toRefs(props)

        const currentOpacity = computed({
            get: () => modelValue.value,
            set: val => emit('update:modelValue', val)
        })

        return {
            currentOpacity
        }
    }
})
</script>

<style lang="less" scoped>
.si-opacity-content {
    display: flex;
    align-items: center;
    .slider-wrap {
        flex: 1;
        margin-right: 15px;
    }
}
</style>